<script setup>
import IconMessageTip from '@/components/IconMessageTip/index.vue'
import ControllerAttribute from "./controllerAttribute.vue";
const { proxy } = getCurrentInstance();
const {  fed_survey_group } = proxy.useDict('fed_survey_group')
const props = defineProps({
  activeData: {
    type:Object,
    default: () => ({})
  },
  drawingList: {
    type:Array,
    default: () => []
  },
})
const issueIndex = computed(()=>props.drawingList.findIndex(item=>item.formId === props.activeData.formId))

</script>

<template>
  <el-tabs type="border-card" class="flex-tabs">
    <el-tab-pane label="题目设置">
      <div class="">
        <el-divider content-position="left"><b>题目属性</b></el-divider>
        <div class="flex justify-between items-center mb-10">
          <span>题目类型：</span>
          <el-tag>{{activeData.typeName}}</el-tag>
        </div>
        <div class="flex justify-between items-center mb-10">
          <span>题号：</span>
          <el-tag type="success"><b>{{issueIndex+1}}</b></el-tag>
        </div>
        <div class="flex justify-between items-center mb-10">
          <span>是否必答题：</span>
          <el-radio-group v-model="activeData.isRequired">
            <el-radio  value="Y">是</el-radio>
            <el-radio  value="N">否</el-radio>
          </el-radio-group>
        </div>
        <div class="flex justify-between items-center mb-10">
          <span>显示副标题：</span>
          <el-radio-group v-model="activeData.showSubTitle">
            <el-radio  value="Y">是</el-radio>
            <el-radio  value="N">否</el-radio>
          </el-radio-group>
        </div>
        <div class="flex justify-between items-center mb-10">
          <span>是否纳入题库：</span>
          <el-switch active-value="Y"  inactive-value="N" v-model="activeData.inStore"></el-switch>
        </div>
        <template v-if="activeData.inStore ==='Y'">
          <div  class="flex justify-between items-center mb-10">
            <div class="flex">
              <span>关键字：</span>
              <IconMessageTip content="纳入题库后的简略标题"></IconMessageTip>
            </div>
            <el-input size="small" class="w-[120px]" v-model="activeData.keyword"></el-input>
          </div>
          <div class="flex justify-between items-center mb-10">
            <div class="flex">
              <span>题目标签：</span>
              <IconMessageTip content="纳入题库后的分组名称"></IconMessageTip>
            </div>
            <el-select  size="small" class="w-[120px]"  v-model="activeData.tag">
              <el-option v-for="item in fed_survey_group" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </template>
        <div class="flex justify-between items-center mb-10">
          <div class="flex">
            <span>是否为主观题：</span>
            <IconMessageTip content="非主观题需要设置答案"></IconMessageTip>
          </div>
          <el-switch active-value="Y" inactive-value="N"  v-model="activeData.isSubjective"></el-switch>
        </div>
        <div class="flex justify-between items-center mb-10">
          <span>分数：</span>
          <el-input-number class="w-[120px]" size="small" :min="0" :max="100" v-model="activeData.score"></el-input-number>
        </div>
        <template v-if="activeData.isSubjective ==='N'">
          <div class="flex justify-between items-center mb-10">
            <div class="flex">
              <span>正确答案：</span>
              <IconMessageTip content="请在左边控件内输入或选择正确答案"></IconMessageTip>
            </div>
            <span>{{ activeData.answer.toString() }}</span>
          </div>
        </template>
        <el-divider content-position="left"><b>控件属性</b></el-divider>
        <ControllerAttribute :activeData="activeData" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
.issue-board{
  height: 100%;
}
.flex-tabs{
  display: flex;
  flex-direction: column;
  height:100%;
  :deep(.el-tabs__content){
    flex:1;
    min-height: 0;
    box-sizing: border-box;
    overflow-y: scroll;
  }
}
</style>
